<template>
  <div>
    <van-popup class="outer" :value="show" @click-overlay="closeEvent">
      <div class="header">
        <h3>根据实际清空为企业打分</h3>
        <div class="grade">
          <div class="item">
            <span>岗位描述</span>
            <van-rate
              v-model="score.positionScore"
              :size="25"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
          </div>
          <div class="item">
            <span>面试情况</span>
            <van-rate
              v-model="score.interviewScore"
              :size="25"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
          </div>
          <div class="item">
            <span>面试官</span>
            <van-rate
              v-model="score.interviewerScore"
              :size="25"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
          </div>
          <div class="item post">
            <span>面试岗位</span>
            <span class="position_post" @click="postClick">{{
              !score.selectVal ? '点击选择面试岗位' : score.selectVal[0].name
            }}</span>
          </div>
          <div class="content">
            <textarea
              v-model="score.content"
              class="txt"
              placeholder="请留言"
            ></textarea>
          </div>
          <div class="btn">
            <van-button @click="cancelBtn">取消</van-button>
            <van-button @click="submit">提交</van-button>
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 岗位选择弹出层 -->
    <van-popup class="inner" v-model="postShow" position="bottom">
      <van-picker
        title="标题"
        show-toolbar
        :columns="list"
        @confirm="confirm"
        @cancel="postShow = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import { commentsPost } from '@/api/company.js'

export default {
  name: 'CompanyComment',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'show'
  },
  data () {
    return {
      postShow: false,
      listType: [],
      list: [],
      allList: [],
      score: {
        selectVal: '',
        // 面试情况
        interviewScore: 5,
        // 面试官
        interviewerScore: 5,
        // 岗位描述
        positionScore: 5,
        // 评论内容
        content: '',
        // 岗位id
        position: null,
        // 面试映象
        tags: []
      },
      initScore: {},
      form: {
        id: Number(this.$route.params.id),
        limit: 9999,
        start: 0,
        city: null,
        salary: null,
        experience: null,
        type: null
      }
    }
  },
  async created () {
    // 初始化数据
    this.initScore = JSON.parse(JSON.stringify(this.score))
    // 调用接口获取职业筛选类型
    // await this.getPositionInfoType(Number(this.$route.params.id))
    // this.listType = this.positionInfoType

    // 调用接口获取岗位信息
    await this.getPositionInfo(this.form)
    this.allList = this.positionInfo
    // console.log('this.allList: ', this.allList)
    this.list = this.positionInfo.map(item => {
      return item.name
    })
    // console.log('this.list: ', this.list)
  },
  computed: {
    ...mapState('positionInfo', ['positionInfoType', 'positionInfo'])
  },
  methods: {
    ...mapActions('positionInfo', ['getPositionInfoType', 'getPositionInfo']),
    // 评论弹框关闭
    closeEvent () {
      this.$emit('input', false)
    },
    // 岗位选择
    postClick () {
      this.postShow = true
    },
    // 岗位选择弹框点击确认
    confirm (value, index) {
      this.score.selectVal = this.allList.filter(item => {
        return item.name === value
      })
      // console.log('this.score.selectVal[0]: ', this.score.selectVal[0])
      this.score.position = this.score.selectVal[0].id

      this.postShow = false
    },
    // 取消按钮
    cancelBtn () {
      this.$emit('input', false)
      this.score = JSON.parse(JSON.stringify(this.initScore))
    },
    // 提交数据
    async submit () {
      // 判断数据是否为空
      if (!this.score.position && !this.score.content) {
        this.$toast.fail('岗位和留言不能为空')
        return
      }
      if (!this.score.position) {
        this.$toast.fail('请选择岗位')
        return
      } else if (!this.score.content) {
        this.$toast.fail('请输入留言')
        return
      }
      // 调用接口，新增评论
      const res = await commentsPost(this.score)
      this.$emit('input', false)
      this.score = JSON.parse(JSON.stringify(this.initScore))
      this.$bus.$emit('changeCommentData', res.data)
    }
  }
}
</script>

<style lang="less" scoped>
.outer {
  width: 80%;
  height: 80%;
  background: #ffffff;
  border-radius: 18px;
  .header {
    padding-top: 57px;
    text-align: center;
    h3 {
      height: 50px;
      font-family: PingFangSC-Semibold;
      font-size: 36px;
      color: #181a39;
      letter-spacing: 0.41px;
      font-weight: 600;
      margin-bottom: 50px;
    }
    .grade {
      padding: 13px 80px;
      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
          height: 40px;
          line-height: 40px;
          font-family: PingFangSC-Regular;
          font-size: 28px;
          color: #545671;
          letter-spacing: 0.32px;
          font-weight: 400;
        }
        ::v-deep .van-icon-star {
          font-size: 40px !important;
        }
        ::v-deep .van-button {
          width: 260px;
          height: 60px;
          background: #ffffff;
          border: 2px solid #b4b4bd;
          border-radius: 8px;
          .van-button__text {
            font-family: PingFangSC-Regular;
            font-size: 22px;
            color: #181a39;
            letter-spacing: 0.25px;
            font-weight: 400;
          }
        }
      }
    }
  }
  .post {
    margin-top: 20px;
  }
  .inner {
    width: 100%;
  }
  .content {
    .txt {
      text-indent: 1em;
      margin-top: 40px;
      width: 100%;
      height: 300px;
      border: 0;
      background: #f7f4f5;
      border-radius: 8px;
      // color: #b4b4bd;
      font-size: 28px;
    }
  }
  .btn {
    display: flex;
    .van-button {
      flex: 1;
    }
  }
  .position_post {
    height: 30px;
    font-family: PingFangSC-Regular;
    font-size: 22px;
    color: #181a39;
    letter-spacing: 0.25px;
    font-weight: 400;
  }
}
</style>
